<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="hg-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="/hg-layui-admin-ui/css/font.css">
    <link rel="stylesheet" href="/hg-layui-admin-ui/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/hg-layui-admin-ui/lib/admin/admin.css" media="all">
    <link rel="stylesheet" href="/hg-layui-admin-ui/lib/Scrollbar/jquery.scrollbar.css">
    <script type="text/javascript" src="/hg-layui-admin-ui/lib/admin/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/hg-layui-admin-ui/lib/Scrollbar/jquery.scrollBar.js"></script>
    <script type="text/javascript" src="/hg-layui-admin-ui/lib/layui/layui.js"></script>
    <script type="text/javascript" src="/hg-layui-admin-ui/lib/admin/admin.js"></script>
    <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body class="layui-body-content">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="iconfont">&#xe6ac;</i>用户数据表
                <span class="layui-layout-right">
                    <a href="javascript:;" hg-event="fullscreen">
                        <i class="layui-icon layui-icon-screen-full"></i>
                    </a>
                </span>
            </div>
            <div class="layui-card-body">
                <div class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                        </div>
                        <div class="layui-inline">
                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
                        </div>
                        <div class="layui-inline">
                            <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn layui-btn-lg layui-btn-normal" lay-submit lay-filter="sreach"><i
                                    class="layui-icon layui-icon-lg">&#xe615;</i></button>
                        </div>
                    </div>
                </div>
                <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>
        </div>
    </div>
</body>
<script>
    //修改
    function edit(obj) {
        //obj通过行tool修改-lay-event
        var row = obj ? obj : hg.table.datatable('test', 'getSelected');
        if (row) {
            hg.open('修改用户' + row.data.username, '/admin/user/edit.html?username='+
                row.data.username + '&phone=' + row.data.phone + '&password=' + row.data.password +
                '&roleCode=' + row.data.roleCode
                , 600, 400);
        } else {
            hg.msg('请选中一行数据，再操作！');
        }
    }
    //删除
    function del(obj) {
        //obj通过行tool删除-lay-event
        var row = obj ? obj : hg.table.datatable('test', 'getSelected');
        if (row) {
            hg.confirm("删除当前选中的用户，确定要删除吗？", function () {
                //row.del(); //只删本地数据
                var username = row.data.username;
                $.ajax({
                    type:"POST",
                    url:"delete",
                    data:{"username":username},
                    dataType:"json",
                    success:function (data) {
                        if(data === true){//删除成功：移除删除行
                            hg.msg('删除成功！');
                            hg.table.datatable('test', 'reload');
                        }else{//删除失败
                            hg.msg('删除失败！');
                        };
                    },
                    error: function (data,type, err) {
                        console.log("ajax错误类型："+type);
                        console.log(err);
                        hg.msg('删除失败！');
                    }
                });
            });
        } else {
            hg.msg('请选中一行数据，再操作！');
        }
    }
    //监听switch操作事件
    hg.form.onswitch('doflag',function(data){
        hg.msg(data.elem.name+'开关checked：'+(data.elem.checked===true?'开启':'禁用'));
        var isDel = 1;
        if(data.elem.checked===true)isDel = 0;
        var user = {'username' : data.elem.name,'isDel' : isDel};
        var userStr = JSON.stringify(user);
        console.log("数据2"+userStr);
        $.ajax({
            type:"POST",
            url:"stop",
            data: userStr,
            dataType:'json',
            contentType: "application/json;charset=UTF-8",
            success:function (data) {
                if(data === true){//操作成功
                    hg.msg('操作成功！');
                }else{//操作失败
                    hg.msg('操作失败！');
                };
            },
            error: function (data,type, err) {
                console.log("ajax错误类型："+type);
                console.log(err);
                hg.msg('操作失败！');
            }
        });
    });
    //监听表单提交事件
    hg.form.onsubmit('sreach', function (data) {
        var start = data.start;
        var end = data.end;
        if (start && end) {
            if (start > end) {
                hg.msg("时间范围错误，请重新选择!");
                return false;
            }
        } else if (start || end) {
            hg.msg("时间范围错误，请重新选择!");
            return false;
        }
        hg.msg(JSON.stringify(data));
        table && table.reload(data);
    });
    //日期控件
    hg.datetime('#start', '#end', {
        type: 'datetime',
        value: hg.getdate('datetime', -30),
        value2: hg.getdate('datetime', '23:59:59'),
        min: hg.getdate('date', -365),
        max: hg.getdate(),
    });
    var tableCols = [
        [{
            field: 'username',
            width: '15%',
            title: '用户名',
            minWidth: 100,
            style: 'color: #ff5722;',
            sort: true
        }, {
            field: 'password',
            width: '15%',
            title: '密码',
            minWidth: 100
        }, {
            field: 'phone',
            width: '30%',
            title: '电话',
            minWidth: 100
        }, {
            field: 'roleName',
            width: '20%',
            title: '角色权限',
            minWidth: 100,
            sort: true
        }, {
            field: 'isDel',
            width: '10%',
            title: '是否禁用',
            templet: function (d) {
                var checked = d.isDel == 0 ? 'checked' : '';
                return '<input type="checkbox" name ="' + d.username + '" value= ' + d.isDel +
                    ' lay-skin="switch" lay-text="开启|禁用" lay-filter="doflag" ' + checked + '>'
            }
        }, {
            field: 'right',
            width: '10%',
            title: '操作',
            templet: function (d) {
                return '<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>'
            }
        }]
    ];
    var toolbar = [{
            text: '添加',
            layuiicon: '&#xe608;',
            handler: function () {
                hg.open('添加用户', '/admin/user/add.html', 600, 400);
            }
        },
        {
            text: '修改',
            layuiicon: '&#xe642;',
            handler: function (obj, row) {
                if (row) {
                    hg.open('修改用户' + row.data.username, '/admin/user/edit.html?username='+
                        row.data.username + '&phone=' + row.data.phone + '&password=' + row.data.password +
                        '&roleCode=' + row.data.roleCode
                        , 600, 400);
                } else {
                    hg.msg('请选中一行数据，再操作！');
                }
            }
        }, {
            text: '删除',
            layuiicon: '&#xe640;',
            handler: function (obj, row) {
                if (row) {
                    hg.confirm("删除当前选中的用户，确定要删除吗？", function () {
                        //row.del(); //只删本地数据
                        var username = row.data.username;
                        $.ajax({
                            type:"POST",
                            url:"delete",
                            data:{"username":username},
                            dataType:"json",
                            success:function (data) {
                                if(data === true){//删除成功：移除删除行
                                    hg.msg('删除成功！');
                                    hg.table.datatable('test', 'reload');
                                }else{//删除失败
                                    hg.msg('删除失败！');
                                }
                            },
                            error: function (data,type, err) {
                                console.log("ajax错误类型："+type);
                                console.log(err);
                                hg.msg('删除失败！');
                            }
                        });
                    });
                } else {
                    hg.msg('请选中一行数据，再操作！');
                }
            }
        }
    ];
    //基本数据表格
    var table = hg.table.datatable('test', '用户管理', 'getAllUsers', {}, tableCols, toolbar, true, 'full-210', ['filter', 'print', 'exports']);

</script>

</html>